<template>
  <div class="main">
    <div class="search">
      <div>
        <h2>机构管理</h2>
      </div>
    </div>
    <div class="jigoucontent">
      <el-card class="box-card jigoucontent_tree">
        <div slot="header" class="clearfix">
          <span>机构</span>
        </div>
        <el-button
          v-if="treedata.length == 0"
          type="primary"
          icon="el-icon-plus"
          @click="add"
          >新增</el-button
        >
        <el-tree
          v-else
          :data="treedata"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.name }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">
                添加下级
              </el-button>
              <el-button type="text" size="mini" @click="() => edit(data)">
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => deleteRow(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-card>
      <el-card class="box-card jigoucontent_lanmu">
        <div slot="header" class="clearfix">
          <span>访问权限</span>
        </div>
        <el-alert
          :title="'当前机构：' + currentTitle"
          type="success"
          :closable="false"
        >
        </el-alert>
        <div style="height: 10px"></div>
        <el-tree
          ref="multipleTable"
          :data="lmtreedata"
          node-key="id"
          show-checkbox
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.name }}</span>
          </span>
        </el-tree>
        <div class="tree_button">
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-card>

      <el-card class="box-card jigoucontent_lanmu">
        <div slot="header" class="clearfix">
          <span>审核权限</span>
        </div>
        <el-alert
          :title="'当前机构：' + currentTitle"
          type="success"
          :closable="false"
        >
        </el-alert>
        <div style="height: 10px"></div>
        <el-tree
          ref="multipleTable2"
          :data="lmtreedata"
          node-key="id"
          show-checkbox
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.name }}</span>
          </span>
        </el-tree>
        <div class="tree_button">
          <el-button type="primary" @click="save2">确 定</el-button>
        </div>
      </el-card>
    </div>

    <div style="width: 50%"></div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
      <Form
        :formobj="formobj"
        :formdata="formData"
        ref="form"
        :formrules="formrules"
      ></Form>
      <div style="padding-left: 100px">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  organizationApiqueryAll,
  organizationApiadd,
  organizationApiedit,
  organizationApidelete,
  getApprovalAuthByOrgId,
  saveApprovalAuthByOrgId
} from "@/api/organizationApir";
import { columnqueryAll } from "@/api/webpage";
import { saveOrgAuth, queryByOrgId } from "@/api/authApi";
import Form from "@/components/form.vue";
export default {
  name: "organizeation",
  components: {
    Form,
  },
  data() {
    return {
      tableData: [],
      params: {
        name: "",
        parentId: "",
      },
      query: {
        name: "",
        code: "",
      },
      treedata: [],
      title: "",
      dialogFormVisible: false,
      formData: {
        parentId: "",
        name: "",
      },
      formobj: [
        { label: "标题", key: "name", type: "input" },
        {
          label: "参与统计",
          key: "statistic",
          type: "radio",
          options: [
            { label: "参与", value: 1 },
            { label: "不参与", value: 0 },
          ],
        },
      ],
      formrules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        statistic: [{ required: true, message: "请选择", trigger: "change" }],
      },
      type: "",
      lmtreedata: [],
      currentTitle: "",
      saveOrgAuthdata: {
        orgId: "",
        columnList: [],
      },
      saveOrgAuthdata2: {
        orgId: "",
        columnIdList: [],
      },
    };
  },
  created() {
    this.getlmlist();
    this.getlist();
  },
  methods: {
    handleNodeClick(val) {
      this.currentTitle = val.name;
      this.saveOrgAuthdata.columnList = [];
      this.saveOrgAuthdata.orgId = this.saveOrgAuthdata2.orgId = val.id;
      queryByOrgId({ orgId: val.id }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$refs.multipleTable.setCheckedNodes(res.data);
        }
      });
      getApprovalAuthByOrgId({ orgId: val.id }).then((res) => {
        if (res.code == 0) {

          this.$refs.multipleTable2.setCheckedNodes(res.data);
        }
      })
    },
    save() {
      let nodes = this.$refs.multipleTable.getCheckedNodes();
      nodes.forEach((item) => {
        this.saveOrgAuthdata.columnList.push(item.id);
      });
      saveOrgAuth(this.saveOrgAuthdata)
        .then((response) => {
          if (response.code == 0) {
            this.$message.success("成功");
            this.saveOrgAuthdata.columnList = [];
          } else {
            this.$message.error("失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    save2() {
      let nodes = this.$refs.multipleTable2.getCheckedNodes();
      nodes.forEach((item) => {
        this.saveOrgAuthdata2.columnIdList.push(item.id);
      });
      saveApprovalAuthByOrgId(this.saveOrgAuthdata2)
        .then((response) => {
          if (response.code == 0) {
            this.$message.success("成功");
            this.saveOrgAuthdata2.columnIdList = [];
          } else {
            this.$message.error("失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    edit(data) {
      this.type = "edit";
      this.formData.id = data.id;
      this.dialogFormVisible = true;
      this.formData.name = data.name;
    },
    append(data) {
      this.type = "add";
      this.formData.parentId = data.id;
      this.dialogFormVisible = true;
    },
    transTree(list, rootValue) {
      const treeData = [];
      list.forEach((item) => {
        if (item.parentId === rootValue) {
          const children = this.transTree(list, item.id);
          if (children.length) {
            item.children = children;
          }
          treeData.push(item);
        }
      });

      return treeData;
    },

    submit() {
      this.$refs.form.getData().then((res) => {
        if (this.type == "edit") {
          organizationApiedit(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.dialogFormVisible = false;
                this.getlist();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("res", res);
          organizationApiadd(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.dialogFormVisible = false;
                this.getlist();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    getlmlist() {
      columnqueryAll(this.query).then((res) => {
        if (res.code == 0) {
          res.data.forEach((item) => {
            if (item.parentId == null) {
              this.lmtreedata.push(item);
            }
          });
          console.log(this.lmtreedata);
        }
      });
    },
    add() {
      this.dialogFormVisible = true;
      this.title = "新增";
    },
    editcontent(row) {
      this.$router.push({
        name: "addform",
        query: { type: "edit", id: row.id },
      });
    },
    getlist() {
      organizationApiqueryAll(this.params).then((res) => {
        if (res.code == 0) {
          this.treedata = this.transTree(res.data, null);
        }
      });
    },
    deleteRow(node, data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(data.id);
          organizationApidelete(ids)
            .then((res) => {
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>